// 引入清除样式文件
@import './common.scss';

// ---首页页面样式设置---

// 设置头部样式
header {
  // 设置导航栏样式
  margin-top: 0px;
  nav {
    padding: vw(17) vw(23) vw(10);
    display: flex;
    align-items: center;
    // 设置logo样式
    .logo {
      img {
        width: vw(123);
      }
    }
    // 设置搜索框样式
    .search {
      height: 0.68rem;
      width: 3.7333rem;
      position: relative;
      input {
        width: 3.7333rem;
        height: 0.68rem;
        color: #777;
        font-size: vw(24);
        border: vw(2) solid #ff9344;
        border-radius: vw(51);
        text-indent: 0.2667rem;
        // 消除搜索框聚焦时候的状态
        outline: none;
        vertical-align: top;
      }
      i {
        position: absolute;
        top: 25%;
        right: 5%;
        font-size: 0.3333rem;
        width: 0.4rem;
        height: 0.4rem;
        color: #ff9344;
      }
    }
  }

  // 轮播图样式制作
  .banner {
    position: relative;
    width: 100%;
    height: vw(287);
    overflow: hidden;

    .banner_imgs {
      position: absolute;
      left: 0;
      top: 0;
      height: vw(287);
      display: flex;
      animation: image_banner 5s ease infinite;
    }
    img {
      flex-shrink: 0;
      height: vw(287);
    }

    .progress {
      position: absolute;
      bottom: vw(89);
      left: 0;
      width: 100%;
      height: vw(12);
      background-color: rgba(35, 32, 35, 0.4);

      span {
        position: absolute;
        display: inline-block;
        width: 20%;
        height: 100%;
        background-color: #c2c1c1;
        animation: progress_banner 5s ease infinite;
      }
    }

    @keyframes progress_banner {
      0% {
        transform: translate(0);
      }
      20% {
        transform: translate(100%);
      }
      40% {
        transform: translate(200%);
      }
      60% {
        transform: translate(300%);
      }
      80% {
        transform: translate(400%);
      }
      100% {
        transform: translate(500%);
      }
    }

    @keyframes image_banner {
      0% {
        transform: translate(0);
      }
      20% {
        transform: translate(-100%);
      }
      40% {
        transform: translate(-200%);
      }
      60% {
        transform: translate(-300%);
      }
      80% {
        transform: translate(-400%);
      }
      100% {
        transform: translate(-500%);
      }
    }
  }
}

// 内容区域
main {
  // 优惠团购
  .shopping {
    .shopping_content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
      height: vw(220);
      img {
        width: vw(242);
        height: vw(94);
      }
    }
  }

  // 猜你喜欢
  .like {
    a {
      .like_content {
        margin-bottom: vw(30);
        display: flex;
        justify-content: space-between;
        .left {
          img {
            width: vw(212);
            height: vw(164);
          }
        }

        .middle {
          margin-left: vw(22);
          p:first-of-type {
            margin-bottom: vw(18);
            font-size: vw(32);
          }

          p:nth-of-type(2) {
            font-size: vw(22);
          }
          p:last-of-type {
            margin-top: vw(22);
            color: #ff9344;
            font-size: vw(32);
          }
        }

        .right {
          margin-bottom: 0.2667rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          color: #494949;
          p {
            font-size: 0.2933rem;
          }
        }
      }
    }
  }
}

footer {
  ul {
    li {
      a {
        i.icon-shouye {
          color: red;
        }
      }
    }
  }
}
